<template>
    <div class="box">
        <header class="header">    
            <ul>
                <li class="li1" @click="$router.push('/city')">{{city}}</li>
                <li class="li2">
                    <van-field @click="$router.push('/search')" v-model="IPvalue" label="JD" placeholder="请输入商品" />
                </li>
                <li class="li3" v-if="loginState" ><van-icon name="contact" size="24"  @click="toUser" /></li>
               
                <li class="li3" v-else @click="$router.push('/login')"> 登录</li>
            </ul>
        </header>
        <div class="content" ref="content">
            <van-pull-refresh v-model="isloading" @refresh="onRefresh">
            <div class="myswiper">
                <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                    <van-swipe-item  v-for="item in bannerList" :key="item.bannerid">
                        <img v-lazy="item.img" loading >
                    </van-swipe-item>
                </van-swipe>
            </div>
            <van-grid :column-num="5" icon-size="40px">
                <van-grid-item v-for="item in navList" :key="item.proid" :icon="item.imgurl" :text="item.title" />
            </van-grid>
            <ul class="seckillTitle">
                <li>嗨购秒杀</li>
                <li>
                    <van-count-down :time="time">
                        <template #default="timeData">
                            <span class="block">{{ timeData.hours }}</span>
                            <span class="colon">:</span>
                            <span class="block">{{ timeData.minutes }}</span>
                            <span class="colon">:</span>
                            <span class="block">{{ timeData.seconds }}</span>
                        </template>
                    </van-count-down>

                </li>
                <li>
                    更多秒杀
                    <van-icon name="clock" color="#f66" size="16"></van-icon>
                </li>
            </ul>
            <ul class="seckillList">
                <li v-for="item in seckillList" :key="item.proid" @click="goDetail(item.proid)">
                    <van-image
                      width='55px'
                      height='55px'
                      :src="item.img1"
                    >
                    </van-image>
                    <p>
                     ￥{{item.originprice}}
                    </p>
                </li>
            </ul>
            <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
                :immediate-check="false"
            >
          
             <ProList :proList="proList"></ProList>
            </van-list>
            </van-pull-refresh>
            <div class="backTop" v-if="scrollTop > 300" @click="backTop">
                <van-icon size="30" name="play-circle" />
            </div>
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import { Swipe, SwipeItem , Grid, GridItem ,Image as VanImage, CountDown , Icon , List ,PullRefresh  , Field , } from 'vant';
import { getBannerList ,  getProList,  getSeckillList } from '../../api/home'
import ProList from '../../components/ProList'
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(VanImage);
Vue.use(CountDown);
Vue.use(Icon);
Vue.use(List);
Vue.use(PullRefresh);
Vue.use(Field);

export default {
    name:'home',
    components: {
        ProList
    },
    data() {
        return {
             city:'北京',
             navList: [
                { navid: 1, title: '嗨购超市', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/125678/35/5947/4868/5efbf28cEbf04a25a/e2bcc411170524f0.png' },
                { navid: 2, title: '数码电器', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png!q70.jpg' },
                { navid: 3, title: '嗨购服饰', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/41867/2/15966/7116/60ec0e0dE9f50d596/758babcb4f911bf4.png!q70.jpg' },
                { navid: 4, title: '嗨购生鲜', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png!q70.jpg.dpg' },
                { navid: 5, title: '嗨购到家', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png!q70.jpg.dpg' },
                { navid: 6, title: '充值缴费', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/185733/21/13527/6648/60ec0f31E0fea3e0a/d86d463521140bb6.png!q70.jpg.dpg' },
                { navid: 7, title: '9.9元拼', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/36069/14/16068/6465/60ec0f67E155f9488/595ff3e606a53f02.png!q70.jpg.dpg' },
                { navid: 8, title: '领券', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/186080/16/13681/8175/60ec0fcdE032af6cf/c5acd2f8454c40e1.png!q70.jpg.dpg' },
                { navid: 9, title: '领金贴', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/196711/35/12751/6996/60ec1000E21b5bab4/38077313cb9eac4b.png!q70.jpg.dpg' },
                { navid: 10, title: 'plus会员', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/37709/6/15279/6118/60ec1046E4b5592c6/a7d6b66354efb141.png!q70.jpg.dpg' }
             ],
             bannerList:[],
             seckillList:[],
             time:3*60*60*1000,
             proList:[],
             loading:false, // 检测是不是上拉加载状态
             finished:false , // 表示还有没有数据 ， 如果为真 表示没有数据可加载了
             count:2  ,// mounted 中默认加载了 第一页数据  所以从2开始
             isloading:false,
             scrollTop:0,
             IPvalue:''
        }
    },
    computed:{
        loginState () {
            return this.$store.state.loginState
        }
    },
    mounted() {
        getBannerList().then(res => this.bannerList =  this.bannerList = res.data.data )
        
        getSeckillList().then(res => {
            console.log(res)
            this.seckillList = res.data.data
        })
        getProList().then(res => {
            this.proList = res.data.data
            console.log(res.data.data);
        })

        if(this.$route.name === 'home'){
        this.$store.state.active = 0
        console.log(this.$store.state.active);
        }
        // console.log(this.$refs.content.scrollTop);
        this.$refs.content.addEventListener('scroll' , () => {
            this.scrollTop = this.$refs.content.scrollTop 
            localStorage.setItem('top', this.$refs.content.scrollTop)  
        }, false)

        this.city = localStorage.getItem('name') || '北京'
        
    },
    methods:{
        onLoad(){  //页面上拉到一定距离刷新
            this.loading = true  //请求开始
            getProList({count:this.count}).then(res => {
                this.loading = false  //请求结束
                // 判断还有没有数据
                if(res.data.data.length === 0 ){
                    //没有数据
                    this.finished = true
                }else{
                    // 累加数据 -- 合并数组
                    this.proList = [...this.proList , ...res.data.data]
                    // 有数据要把页码加1
                    this.count++
                }
            })
        },
        onRefresh(){
            this.isloading = true
            getProList().then(res=> {
                this.isloading = false
                this.proList = res.data.data
                // 重置页码 是否还有数据
                this.count = 2
                this.finished = false
            })
        },
        backTop(){
            // this.scrollTop = 0
            this.$refs.content.scrollTop = 0
        },
        goDetail(proid){
            // this.$router.push('/detail/?' + proid)
            this.$router.push({name:'detail' , params:{proid} } )
            // console.log(proid,222);
        },
        toUser(){
            this.$router.push('/user')
            // this.$store.state.active = 3
        }
    },
    deactivated () {
        // this.$refs.content.addEventListener('scroll' , () => {
        //     localStorage.setItem('top', this.$refs.content.scrollTop)
        //     console.log( this.$refs.content.scrollTop);
        // }, false)
    },
    activated () {
        this.city = localStorage.getItem('name') || '北京'
        this.$refs.content.scrollTop = localStorage.getItem('top') * 1  || 0
        localStorage.removeItem('top')
        if(this.$route.name === 'home'){
            this.$store.state.active = 0
            // console.log(this.$store.state.active);
        }
    },
    watch:{
      
    }
  
}
</script>

<style lang='stylus' scoped>

// scoped 代表该样式只在当前组件是有效的，不会影响其他组件的样式
.myswiper
    height: 150px
    width: 96%
    margin: 10px 2%

.my-swipe
    border-radius: 10px
    height: 100% 
    img{
        height: 100%
        width: 100%
    }
.seckillList
    display: flex
    li
        flex: 1
        height: 0.7rem
        display: flex
        flex-direction: column
        justify-content: center
        align-items: center
        van-image 
            width: 0.55rem
            height: 0.55rem
            img
                width: 0.55rem
                height: 0.55rem
        p
            color #cc0000
            font-size: 14px
            
.seckillTitle 
    display: flex
    height: 0.4rem
    li
        text-align: left
        &:nth-child(1)
            width: 60px
            margin-left: 10px
            font-size: 14px
            font-weight: bold
        &:nth-child(2)
            flex: 1
        &:nth-child(3)
            width: 120px
            text-align right
            font-size 14px
            margin-right 10px
            color #f66
            .van-icon
                transform rotate(225deg)
.colon {
    display: inline-block;
    margin: 0 4px;
    color: #ee0a24;
}
.block {
    display: inline-block;
    width: 22px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: #f66;
}

.backTop
    position: fixed
    width: 32px
    height: 32px
    border-radius: 150%
    border: 1xp solid #ccccccc
    display: flex
    justify-content: center
    align-items: center
    bottom: 120px
    right: 10px
    background-color: #fff
    transform: rotate(-90deg)

.header
    ul  
        background-color: #c82519
        height: 100%
        display: flex
        justify-content: space-between
        align-items center
        padding: 0 15px 0 10px
        li
            color: #fff
        .li1
            font-size: 16px
            width: 0.4rem
            overflow hidden 
            text-overflow: ellipsis;
            white-space: nowrap;
        .li2
            display: flex
            justify-content: center
            align-items: center
            padding: 8px 0
            width: 2.6rem
            height: 0.3rem

.van-field{
    width: 100%
    height: 100%
    border-radius: 20px
    display: flex
    justify-content: center
    align-items: center
}
/deep/.van-cell__title{
    width: 15%
    color: #f66
    font-size: 0.18rem
    font-weight: 800
}
</style>